前言

嘿，你是不是也曾在用 TypeScript 寫搜尋功能時遇到過各種型別錯誤，搞得頭昏腦脹？
放心，你不是一個人！TypeScript 的型別系統雖然強大，但也常常讓我們手忙腳亂。

今天，我們就來輕鬆聊聊那些讓人崩潰的常見錯誤，讓你在未來能避免這些小陷阱，寫出更穩健的程式碼。

不管你是新手還是老手，這篇文章都能幫你少走彎路，快來一起笑看這些「踩雷」時刻吧！

別再被 TypeScript 嚇到！看完這篇，不再掉入搜尋函式的型別陷阱

實際案例能幫助理解 TypeScript 的類型系統如何運作，以及在使用這些類型定義時可能遇到的錯誤情況。
以下是一些實際情境，展示在使用 search 函式時會發生錯誤的幾個例子：

知識補充：什麼是 declare？

在這篇文章中，你會看到 declare 的使用。
declare 是 TypeScript 用來向編譯器宣告變數、函式、類別或模組存在的關鍵字，而不提供具體實現。

這個功能非常適合用在處理第三方函式庫或外部程式碼時，因為它能讓 TypeScript 知道某些物件存在，但不用理會其具體實現。

演練場

TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript

• 範例程式碼

// 一個輔助類型，描述我們預期從後端呼叫時獲得的結果
type Result = {
  title: string, // 標題
  url: string, // 網址
  abstract: string // 摘要
}

/**
 * search 函式接收一個查詢字串和一組標籤（字串陣列），
 * 並將這些資料發送到後端以獲取篩選過的結果
 */
declare function search(
  query: string, // 查詢字串
  tags: string[] // 標籤陣列
): Result[] // 回傳一組符合條件的結果

1. 傳入錯誤類型的參數

假設我們在呼叫 search 函式時，傳入了錯誤類型的參數，如將 tags 傳入了數字陣列而非字串陣列，這會導致 TypeScript 報錯。

// 錯誤案例：tags 應該是 string[]，但這裡傳入了 number[]
const results = search("typescript", [1, 2, 3]); 
// Error: Argument of type 'number[]' is not assignable to parameter of type 'string[]'.

2. 忘記傳入參數或傳入錯誤的參數數量

當呼叫 search 函式時，忘記傳入所有必需的參數或參數數量不對，會導致類型錯誤。

// 錯誤案例：缺少必需的 tags 參數
const results = search("typescript"); 
// Error: Expected 2 arguments, but got 1.

// 錯誤案例：傳入多餘的參數
const results = search("typescript", ["javascript"], "extra");
// Error: Expected 2 arguments, but got 3.

3. 取得的結果結構不符合 Result 類型

若 search 函式內部的實現回傳的物件結構與定義的 Result 類型不符合，會產生錯誤。例如，如果後端傳回的資料缺少必要欄位或欄位類型不符，TypeScript 會提示錯誤。

// 假設後端回傳的結果缺少 url 屬性
const mockData: any = [
  { title: "TypeScript Guide", abstract: "Learn TypeScript step by step." }
];

// 錯誤案例：因為 mockData 不符合 Result[]
const results: Result[] = mockData;
// Error: Type '{ title: string; abstract: string; }[]' is not assignable to type 'Result[]'.
// Property 'url' is missing in type '{ title: string; abstract: string; }' but required in type 'Result'.

4. 函式回傳的結果類型不正確

如果函式 search 在實作中沒有回傳符合 Result[] 類型的資料，例如回傳一個物件而非陣列，會導致編譯錯誤。

// 假設 search 函式實作錯誤地回傳了一個物件而非陣列
declare function search(query: string, tags: string[]): Result;

// 錯誤案例：search 回傳應為 Result[]，但此處假設返回的是一個物件
const results = search("typescript", ["guide"]);
// Error: Type 'Result' is not assignable to type 'Result[]'.
// Property 'length' is missing in type 'Result'.

5. 物件屬性類型不符合定義

當我們試圖存取 Result 類型的屬性，但賦予的值不符合定義的類型時，也會引發錯誤。例如，試圖將 url 設定為數字而非字串。

const result: Result = {
  title: "TypeScript Guide",
  url: 12345, // 錯誤案例：應該是 string，但這裡是 number
  abstract: "Learn TypeScript step by step."
};
// Error: Type 'number' is not assignable to type 'string'.

看文本文你會學到

• 型別檢查的防護作用：理解 TypeScript 的型別檢查如何主動防範開發過程中的錯誤，提升程式碼的正確性與穩定性。

• 識別並避開型別陷阱：掌握常見錯誤的避免方法，包括處理錯誤的參數類型、不足或多餘的參數數量，以及不符合定義的回傳值。

• 善用錯誤提示優化程式碼：領會 TypeScript 錯誤提示的實用性，幫助即時發現問題，確保程式碼品質並減少運行時的意外。

一起用 TypeScript，寫得更穩，踩雷更少吧！( ˶ˊᵕˋ)੭♡